<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="购物车" left-arrow @click-left="$router.go(-1)" />
        </header>
        <div class="content">

            <!-- {{ $store.state.cartList }} -->
            <!-- {{ cartList }} -->
            <van-empty description="购物车是空的" v-if="cartList.length == 0" />
            <van-swipe-cell v-else v-for="item in cartList" :key="item.id">
                <van-card :num="item.count" :price="`${item.price}.00`" :title="item.title" :thumb="item.image">
                    <template #tag>
                        <!-- 复选框 -->
                        <van-checkbox v-model="item.checked"></van-checkbox>
                    </template>
                    <template #footer>
                        <!-- 步进器 -->
                        <van-stepper v-model="item.count" max="10" />
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="deleteItem(item.id)" />
                </template>
            </van-swipe-cell>
        </div>

    </div>
    <footer class="footer">

        <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="$router.push('/order')">
            <van-checkbox v-model="allChecked">全选</van-checkbox>
        </van-submit-bar>
    </footer>
</template>
<script>
import { mapState, mapGetters } from 'vuex'

export default {
    computed: {
        ...mapState(['cartList']),
        ...mapGetters(['totalPrice']),
        allChecked: {
            // 获取： 获取allChecked的值 只能是true \ false
            // 列表里面所有的商品都被选中，allChecked就是true; 只要有一个商品没有被选中，allChecked就是false
            // 列表中所有元素的checked属性都为true,allChecked就是true ; 只要有一个元素的checked属性为false,allChecked就是false
            get() {
                if (this.cartList.length == 0) {
                    return false
                } else {
                    // every() 用于检测数组中数组中所有元素是否满足条件，所有元素满足这个条件，返回true,只要有一个元素不满足条件，返回false
                    return this.cartList.every(item => item.checked == true)
                }
            },
            // 设置：通过allchecked值的变化，来设置list中的checked值
            set(val) {
                // this.cartList.forEach(item => item.checked = val)
                // vux中不允许在组件中改变cartList的数据
                this.$store.commit('changeCheck', val)
            }
        }
    },
    methods: {
        deleteItem(id) {
            // 把cartList里面id相同的这条删掉
            this.$store.commit('deleteCart', id)

        }
    }
}

</script>

<style lang="scss" scoped>
.delete-button {
    height: 100%;
}
</style>